<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data () {
    return {
      charts: '',
      valueList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options () {
      const Echarts = require('echarts')
      return {
        holeDepth: 30,
        title: {
          text: '地下水位曲线图',
          x: 'center',
          align: 'right'
        },
        grid: {
          left: '70px',
          right: '80px',
          bottom: '70px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: function (params, ticket, callback) {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (i === 0) {
                contentArr.push(Format(new Date(data.value[0])))
              }
              contentArr.push(data.marker + data.seriesName + '水柱高度：' + data.value[1] + 'm')
            }
            return contentArr.join('<br/>')
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLine: { onZero: false },
          axisLabel: { // 坐标轴标签样式设置
            showMaxLabel:true,
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
            },
          }
        },
        yAxis: {
          max: this.holeDepth + 1,
          name: '水柱高度(m)',
          type: 'value'
        },
        series: this.createSeries(
          [{
            name: this.monitorName,
            type: 'line',
            animation: true,
            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.valueList
          }],this.holeDepth)
      }
    }
  },
  methods: {
    setWarningLine () {
    },
    updateEchart (data, monitorName, holeDepth) {
      this.monitorName = monitorName
      this.holeDepth = holeDepth
      this.valueList = data.realValue;
      this.charts.setOption(this.options)
      this.charts.resize()
    },
    createSeries (serverData,holeDepth) {
      const Echarts = require('echarts')
      // 如果没传递drillingDepth参数，就从yAxis中获取
      if (typeof (holeDepth) === 'undefined') {
        holeDepth = 0
      }
      var datalist = []
      for (var i = 0; i < serverData.length; i++) {
        var sss = {
          name: serverData[i].name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          itemStyle: {
            normal: {
              color: '#00f2fd'
            }
          },
          areaStyle: {
            normal: {
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0.3, color: '#00f2fd' // 0% 处的颜色
                }, {
                  offset: 0.8, color: '#1c85ff' // 100% 处的颜色
                }, {
                  offset: 1, color: '#0600ff' // 100% 处的颜色
                }]
              )
            }
          },
          data: serverData[i].data,
          markLine: {
            data: [
              {
                symbol: 'none',
                yAxis: holeDepth,
                lineStyle: {
                  color: 'rgb(14,122,255)',
                  width: 3
                },
                label: {
                  normal: {
                    padding: [-13, -20, 15, -45],
                    position: 'middle',
                    formatter: function (data, index) { // 坐标轴文字展示样式处理
                      return '孔深:'+ data.value + 'm'
                    },
                  }
                },
              },
              {
                type: 'average',
                lineStyle: {
                  color: 'rgb(56, 94, 19)',
                  width: 1
                },
                label: {
                  normal: {
                    padding: [-13, -20, 15, -45],
                    position: 'end',
                    formatter: function (data, index) { // 坐标轴文字展示样式处理
                      return '平均水位:'+ data.value + 'm'
                    },
                  }
                },
              },
              [{
                symbol: 'none',
                x: '93%',
                yAxis: 'max'
              }, {
                symbol: 'circle',
                lineStyle: {
                  color: 'rgb(253,12,5)',
                  width: 1
                },
                label: {
                  normal: {
                    padding: [-13, -20, 15, -45],
                    position: 'start',
                    formatter: function (data, index) { // 坐标轴文字展示样式处理
                      return '最大水位:'+ data.value + 'm'
                    },
                  }
                },
                type: 'max',
                name: '最高点'
              }]
            ]
          }
        }
        datalist.push(sss)
      }
      return datalist
    }
  },
}
</script>
